<template>
  <MyModal ref="myModal" title="修改备注" :top="35">
    <template #content>
      <div style="display: grid; place-items: center">
        <a-form ref="loginForm" :model="formState" style="width: 360px">
          <a-form-item has-feedback name="id">
            <a-input v-model:value="recordId" disabled></a-input>
          </a-form-item>

          <a-form-item has-feedback name="remark">
            <a-textarea
              v-model:value="formState.remark"
              placeholder="备注"
              autocomplete="off"
              style="max-height: 260px"
              :maxlength="50"
            ></a-textarea>
          </a-form-item>

          <a-form-item style="text-align: center">
            <a-button style="width: 360px;border-radius: 6px" type="primary" block @click="handleSubmit">
              确定
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as fansApi from '@/api/fans'
import { message } from 'ant-design-vue'

const myModal = ref()

let recordId = ref<string>()
const showModal = (id: string) => {
  formState.value.remark = ""
  recordId.value = id
  myModal.value?.showModal()
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

interface formState {
  id: string | number
  remark: string
}
const formState = ref<formState>({
  id: '',
  remark: '',
})

// 登录
const handleSubmit = async () => {
  let params = {
    id: recordId.value,
    remark: formState.value.remark,
  }
  // console.log('params=', params)

  try {
    const { state, message: msg } = await fansApi.editWechatFansRemark(params)
    if (state === 200) {
      myModal.value?.cancelModal()
      emit('refresh')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
</script>
